<template>
	<view class="" style="position: relative;">
		<view class="" style="position: sticky;top: 0;background: #fff;z-index: 999;">
			<cu-custom :isBack="true" :bgColor="'#ffffff'">
				<view slot="content" class="title">
					选择服务商
				</view>
			</cu-custom>
			
			<view class="" >
				<view class="search-cont">
					<view class="left">
						<view class="lg text-gray cuIcon-search icon-search">
						
						</view>
						<input v-model="search" @focus="showDialog" @confirm="changeValue" type="text" placeholder="搜索服务商" />
					</view>
				</view>
			</view>
			<search ref="search" :list="list" :activeList="activeList" @changeSearch="changeSearch"></search>
		</view>
		
		<view class="list-box">
			<view class="list-item" v-for="(item,index) in activeList" :key="index">
				<view class="left">
					<image src="../../../../static/service/server.png" mode=""></image>
					<view class="text-cut">
						{{item.name}}
					</view>
				</view>
				<view @click="del(index)" class="right">
					删除
				</view>
			</view>
		</view>
		
		<view class="" style="height: 180rpx;">
			
		</view>
		
		<view @click.stop="submit" :class="activeList.length?'':'disabled'" class="bottom-box">
			确定({{activeList.length}})
		</view>
	</view>
</template>

<script>
	import {getMerchantList} from "@/api/pet/service/saler.js"
	import search from "./components/search"
	export default {
		components:{
			search
		},
		data(){
			return {
				search:"",
				list:[],
				activeList:[],
			}
		},
		methods:{
			changeValue(e){
				getMerchantList({
					type:'E',
					svrType:'CARGO',
					status:'PASS',
					name:this.search,
				}).then(res=>{
					res.map(item=>item.active = false)
					this.list = res
				})
			},
			changeSearch(item,index){
				this.list[index].active = true
				if(this.activeList.length){
					let obj = this.activeList.find(e=>e.id == item.id)
					console.log(obj)
					if(obj==undefined){
						this.activeList.push(item)
					}
				}else{
					this.activeList.push(item)
				}
				
			},
			del(index){
				this.activeList.splice(index,1)
			},
			submit(){
				uni.$emit('active_merchant_list',this.activeList)
				uni.navigateBack()
			},
			showDialog(){
				this.$refs.search.handleOpen()
			}
		}
	}
</script>

<style scoped lang="scss">
	.list-box{
		padding: 0 32rpx;
		.list-item{
			height: 122rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;
			border-bottom: 1rpx solid #f7f7f7;
			.left{
				display: flex;
				align-items: center;
				image{
					margin-right: 16rpx;
					width: 26rpx;
					height: 26rpx;
				}
				view{
					font-family: PingFangSC, PingFang SC;
					font-weight: 500;
					font-size: 30rpx;
					color: var(--btnColor);
					line-height: 42rpx;
					text-align: left;
					font-style: normal;
					flex: 1;
				}
			}
			.right{
				font-family: PingFangSC, PingFang SC;
				font-weight: 400;
				font-size: 24rpx;
				color: #FF2626;
				line-height: 33rpx;
				text-align: center;
				font-style: normal;
			}
		}
	}
	
	.bottom-box{
		position: fixed;
		bottom: 46rpx;
		left: 50%;
		transform: translateX(-50%);
		width: 686rpx;
		height: 96rpx;
		background: var(--primaryBg);
		border-radius: 48rpx;
		
		font-family: PingFangSC, PingFang SC;
		font-weight: 600;
		font-size: 32rpx;
		color:  var(--btnColor);
		line-height: 45rpx;
		text-align: center;
		font-style: normal;
		display: flex;
		align-items: center;
		justify-content: center;
		&.disabled{
			opacity: 0.5;
			pointer-events: none;
		}
	}
	
	
	
	.search-cont {
		width: 100%;
		height: 108rpx;
		background: #FFFFFF;
		border-radius: 32rpx 32rpx 0rpx 0rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 16rpx 24rpx;
		position: static;
		top: 0;
		.left {
			position: relative;
			width: 100%;
			.icon-search {
				position: absolute;
				left: 15rpx;
				top: 50%;
				transform: translateY(-50%);
			}
	
			input {
				padding: 0 30rpx 0 60rpx;
				width: 100%;
				height: 76rpx;
				background: #F8F8F8;
				border-radius: 40rpx;
			}
		}
	
		.right {
			display: flex;
			align-items: center;
			justify-content: center;
			flex-direction: column;
	
			image {
				width: 44rpx;
				height: 44rpx;
			}
	
			view {
				font-family: PingFangSC, PingFang SC;
				font-weight: 500;
				font-size: 20rpx;
				color: var(--h1Color);
				line-height: 28rpx;
				text-align: left;
				font-style: normal;
			}
		}
	}
	
	
</style>